<template>
  <div class="MessageItem" @click="messageClick" >
      <img class="chatImg" src="@/assets/img/message/ContactService.svg" alt="">
      <div class="messageInf">
          <div class="chaterName">
              <span class="name">{{friendData.userName}}</span>
              <span class="chatTime">{{lastTime}}</span>
          </div>
          <div class="lastNews">{{lastMessage}}</div>
      </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

  export default {
      name:'MessageItem',
      data() {
          return {
              lastMessage: '',
              lastTime: '',
          }
      },
      props: {
        friendData: {
          type:Object,
          default: {}
        }
      },
      computed:{
        ...mapState(['latChatRecode'])
      },
      methods: {
          ...mapMutations(['HANDLER_ACTIVE_FRIEND_DATA']),
          messageClick () {
            this.HANDLER_ACTIVE_FRIEND_DATA(this.friendData)
            this.$router.push({
              path:'/messagedetail'
            })
          },
          showLastMessage () {
            const lastChat = this.latChatRecode.filter(item => {
              return item.ToUserId === this.friendData.id
            })
            if (lastChat[0]) {
              this.lastMessage = lastChat[0].ContentText
              this.lastTime = lastChat[0].SendTime.substring(11,16)
            }
          },

      },
      mounted() {
          this.showLastMessage()
      },
    }
</script>

<style scoped>
  /* 每个消息条总体样式样式 */
  .MessageItem {
    display: flex;
    height: 60px;
    width: 100%;
    background-color: #fff;
  }
  /* 设置头像样式 */
  .chatImg {
    flex: 1;
    padding: 5px;
  }
  /* 设置信息条用户名与最新聊天样式 */
  .messageInf{
    position: relative;
    flex:9;
    display: flex;
    flex-direction: column;
    border-top: 0.5px solid rgb(235, 233, 233);
    border-bottom: 0.5px solid rgb(235, 233, 233,.01);
  }
  /* 设置信息条用户名与时间样式 */
  .chaterName {
      flex: 2;
      display: flex;
      position: relative;
      top: 50%;
      transform: translate(0,-50%);
  }
  /* 设置用户名样式 */
  .name {
      flex: 4;
      font-size: 16px;
      font-weight: 700;
  }
  /* 设置时间样式 */
  .chatTime {
      flex: 1 ;
      font-size: 10px;
      padding: 5px;
      text-align: right;
  }

  /* 设置信息条最新消息样式 */
  .lastNews {
      flex: 1;
      font-size: 10px;
      display: inline-block;
      width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }

</style>